<template>
  <view class="personal-info-page">
    <!-- 头部：返回按钮 + 标题 -->
    <view class="header">
      <text class="back-btn" @click="goBack">＜</text>
      <text class="title">个人信息</text>
    </view>

    <!-- 1. 头像区域（单独方法） -->
    <view class="info-item">
      <view class="item-left">
        <text class="item-label">头像</text>
        <view class="avatar-wrap">
          <image class="avatar" :src="headIcon" mode="aspectFill" @error="handleAvatarError"></image>
          <button class="change-btn" @click="changeAvatar">更改头像</button>
        </view>
      </view>
    </view>

    <!-- 2. 姓名（共用通用修改方法） -->
    <view class="info-item" @click="openEditModal('username')">
      <view class="item-left">
        <text class="item-label">姓名</text>
        <text class="item-value">{{ username || '未设置' }}</text>
      </view>
      <text class="arrow">＞</text>
    </view>

    <!-- 3. 手机号（共用通用修改方法） -->
    <view class="info-item" @click="openEditModal('telephone')">
      <view class="item-left">
        <text class="item-label">手机号</text>
        <text class="item-value">{{ telephone || '未设置' }}</text>
      </view>
      <text class="arrow">＞</text>
    </view>

    <!-- 4. 年龄（共用通用修改方法） -->
    <view class="info-item" @click="openEditModal('age')">
      <view class="item-left">
        <text class="item-label">年龄</text>
        <text class="item-value">{{ age || '未设置' }}</text>
      </view>
      <text class="arrow">＞</text>
    </view>

    <!-- 5. 密码（单独方法） -->
    <view class="info-item" @click="openPasswordModal">
      <view class="item-left">
        <text class="item-label">密码</text>
        <text class="item-value">*********</text>
      </view>
      <text class="arrow">＞</text>
    </view>

    <!-- 通用编辑弹窗（姓名/手机号/年龄共用） -->
    <view class="modal-mask" v-if="showEditModal" @click="closeEditModal"></view>
    <view class="modal-box" v-if="showEditModal">
      <text class="modal-title">{{ currentTitle }}</text>
      <view class="modal-content">
        <input 
          v-model="editValue" 
          :type="currentType === 'telephone' ? 'number' : 'text'"
          :placeholder="'请输入' +currentTitle "
          class="modal-input"
        />
      </view>
      <view class="modal-btns">
        <button class="modal-btn cancel" @click="closeEditModal">取消</button>
        <button class="modal-btn confirm" @click="saveEdit">确定</button>
      </view>
    </view>

    <!-- 密码修改弹窗（单独弹窗） -->
    <view class="modal-mask" v-if="showPasswordModal" @click="closePasswordModal"></view>
    <view class="modal-box" v-if="showPasswordModal">
      <text class="modal-title">修改密码</text>
      <view class="modal-content">
        <input v-model="oldPwd" type="password" placeholder="原密码" class="modal-input" />
        <input v-model="newPwd" type="password" placeholder="新密码" class="modal-input" />
        <input v-model="confirmPwd" type="password" placeholder="确认新密码" class="modal-input" />
      </view>
      <view class="modal-btns">
        <button class="modal-btn cancel" @click="closePasswordModal">取消</button>
        <button class="modal-btn confirm" @click="savePassword">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
// 导入接口（和登录页面一样的用法）
import { update ,updatePassword} from '@/api/user.js';
import state from '../../store/state';

export default {
  data() {
    return {
      // 用户信息数据
      headIcon: '', // 头像
      username: '',         // 姓名
      telephone: '',    // 手机号
      age: '',          // 年龄
      userId: '',
      // 通用编辑弹窗相关
      showEditModal: false,  // 弹窗是否显示
      currentType: '',       // 当前编辑的类型（name/telephone/age）
      currentTitle: '',      // 弹窗标题（姓名/手机号/年龄）
      editValue: '',         // 输入的新值

      // 密码修改弹窗相关
      showPasswordModal: false, // 密码弹窗是否显示
      oldPwd: '',               // 原密码
      newPwd: '',               // 新密码
      confirmPwd: ''            // 确认新密码
    };
  },
  

  // 页面加载时获取用户信息
  onLoad() {
    this.loadUserInfo();
  },

  methods: {
	  // 头像加载失败时，强制使用默认头像
	    handleAvatarError() {
	      this.headIcon = "/static/avatar/avatar.png";
	    },
    // 1. 返回上一页（最简单的方法）
    goBack() {
      uni.navigateBack(); //  uni-app自带的返回方法
    },

    // 2. 加载用户信息（打开页面时获取）
    loadUserInfo() {
		 if (!state.userInfo) {
		    setTimeout(() => {
		          console.log('延时2秒后执行');
		          this.loadUserInfo(); // 执行你的方法
		        }, 2000);
				return; // 关键：提前返回，避免后续代码执行
		  }
		this.userId = state.userInfo.userId 
		this.username = state.userInfo.username
		this.telephone = state.userInfo.telephone
		this.age = state.userInfo.age
		this.headIcon = state.userInfo.headIcon 
    },

    changeAvatar() {
      // 第一步：选择本地图片
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempPath = res.tempFilePaths[0]; // 本地临时文件路径
          
          // 第二步：使用 uni.uploadFile 上传（关键修改）
          uni.uploadFile({
            // 1. 后端接口地址（确保完整且正确，如：http://你的域名/api/user/updateAvatar）
            url: '/api/user-module/uploadFile/updateAvatar', 
            // 2. 要上传的文件本地路径（直接使用 tempPath）
            filePath: tempPath, 
            // 3. 后端接收文件的字段名（必须与 @RequestParam("headIcon") 一致）
            name: 'headIcon', 
            // 4. 额外参数：userId（与后端 @RequestParam("userId") 对应）
            formData: { 
              userId: this.userId 
            },
            // 上传成功回调
            success: (uploadRes) => {
              // 注意：uploadRes.data 是字符串，需转为 JSON 对象
              const res = JSON.parse(uploadRes.data);
              if (res.code === 200) {
				  this.loadUserInfo();
				  
                
                uni.showToast({ title: '头像修改成功' });
              } else {
                uni.showToast({ title: res.msg || '上传失败', icon: 'none' });
              }
            },
            // 上传失败回调
            fail: (err) => {
              console.error('上传失败原因：', err); // 打印错误详情
              uni.showToast({ title: '上传失败，请重试', icon: 'none' });
            }
          });
        }
      });
    },

    // 4. 打开通用编辑弹窗（姓名/手机号/年龄共用）
    openEditModal(type) {
      this.showEditModal = true; // 显示弹窗
      this.currentType = type;   // 记录当前编辑的类型

      // 根据类型设置标题和默认值
      if (type === 'username') {
        this.currentTitle = '姓名';
        this.editValue = this.name; // 回显当前值
      } else if (type === 'telephone') {
        this.currentTitle = '手机号';
        this.editValue = this.telephone;
      } else if (type === 'age') {
        this.currentTitle = '年龄';
        this.editValue = this.age;
      }
    },

    // 5. 关闭通用编辑弹窗
    closeEditModal() {
      this.showEditModal = false;
      this.editValue = ''; // 清空输入
    },

    // 6. 保存通用编辑（提交到后端）
    saveEdit() {
		// 验证用户ID是否存在
		  if (!this.userId) {
		    uni.showToast({ title: '用户信息未加载，请稍后再试', icon: 'none' });
		    return;
		  }
      // 简单验证：不能是空值
      if (!this.editValue.trim()) {
        uni.showToast({ title: '请输入' + this.currentTitle, icon: 'none' });
        return; // 验证失败就不继续了
      }

      // 手机号额外验证格式
      if (this.currentType === 'telephone' && !/^1[3-9]\d{9}$/.test(this.editValue)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }

      // 年龄额外验证：必须是数字
      if (this.currentType === 'age' && isNaN(this.editValue)) {
        uni.showToast({ title: '请输入正确的年龄', icon: 'none' });
        return;
      }

      // 构建更新数据
        const updateData = {
          userId: this.userId,
          [this.currentType]: this.currentType === 'age' ? parseInt(this.editValue) : this.editValue
        };
      // 调用修改接口（和登录接口用法一样）
      update(updateData).then(res => {
        if (res.code === 200) {
          // 修改成功：更新页面显示
          this[this.currentType] = this.editValue; // 动态更新对应字段
          uni.showToast({ title: '修改成功' });
          this.closeEditModal(); // 关闭弹窗
		  // 更新全局状态
		        if (state && state.userInfo) {
		          state.userInfo[this.currentType] = this.editValue;
		        }
				
        } else {
          uni.showToast({ title: res.msg || '修改失败', icon: 'none' });
        }
      }).catch(() => {
        uni.showToast({ title: '网络错误', icon: 'none' });
      });
    },

    // 7. 打开密码修改弹窗
    openPasswordModal() {
      this.showPasswordModal = true;
      // 每次打开清空输入
      this.oldPwd = '';
      this.newPwd = '';
      this.confirmPwd = '';
    },

    // 8. 关闭密码修改弹窗
    closePasswordModal() {
      this.showPasswordModal = false;
    },

    // 9. 保存密码修改
    savePassword() {
      // 验证逻辑
      if (!this.oldPwd) {
        return uni.showToast({ title: '请输入原密码', icon: 'none' });
      }
      if (this.newPwd.length < 6) {
        return uni.showToast({ title: '新密码至少6位', icon: 'none' });
      }
      if (this.newPwd !== this.confirmPwd) {
        return uni.showToast({ title: '两次密码不一致', icon: 'none' });
      }

      // 调用修改密码接口
      updatePassword({
        oldPwd: this.oldPwd,
        password: this.newPwd,
		userId : state.userInfo.userId,
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({ title: '密码修改成功' });
          this.closePasswordModal(); // 关闭弹窗
        } else {
          uni.showToast({ title: res.msg || '修改失败', icon: 'none' });
        }
      }).catch(() => {
        uni.showToast({ title: '网络错误', icon: 'none' });
      });
    }
  }
};
</script>

<style>
/* 基础样式 */
.personal-info-page {
  padding: 15rpx;
  background-color: #fff;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 30rpx;
}
.back-btn {
  font-size: 40rpx;
  margin-right: 20rpx;
  color: #333;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 信息项样式 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.item-left {
  display: flex;
  align-items: center;
}
.item-label {
  font-size: 32rpx;
  color: #666;
  width: 140rpx; /* 固定宽度，对齐更整齐 */
}
.item-value {
  font-size: 32rpx;
  color: #333;
}
.arrow {
  font-size: 36rpx;
  color: #ccc;
}

/* 头像样式 */
.avatar-wrap {
  display: flex;
  align-items: center;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.change-btn {
  font-size: 28rpx;
  padding: 15rpx 30rpx;
  border: 1px solid #007aff;
  color: #007aff;
  background: transparent;
  border-radius: 8rpx;
}

/* 弹窗遮罩 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 998;
}

/* 弹窗盒子 */
.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  z-index: 999;
}
.modal-title {
  display: block;
  padding: 30rpx;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  border-bottom: 1px solid #f5f5f5;
}
.modal-content {
  padding: 30rpx;
}
.modal-input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

/* 弹窗按钮 */
.modal-btns {
  display: flex;
  border-top: 1px solid #f5f5f5;
}
.modal-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  border: none;
  background: transparent;
}
.cancel {
  color: #666;
  border-right: 1px solid #f5f5f5;
}
.confirm {
  color: #007aff;
}
</style>